<template>
    <div class="forgot_main">
        <el-input class="forgot_input" v-model="r_email" placeholder="请输入您的邮箱" clearable />
        <el-button @click="user_registry" class="forgot-button" type="primary" :disabled="this.save_cd">{{ save_text }}</el-button>
        <span style="padding-top: 12px;display: block;">目前仅支持QQ邮箱</span>
        <span style="padding-top: 12px;display: block;">每个邮箱每天只能重置一次密码</span>
    </div>
</template>

<script>
    import {ElLoading, ElMessage} from "element-plus";
    import axios from "axios";
    import Qs from "qs";

    export default {
        name: "FindPassword",
        data(){
            return {
                r_email: '',
                save_cd: false,
                save_text: "重置密码",
            }
        },
        methods: {
            user_registry(){
                let _this = this

                if (!(this.r_email)){
                    ElMessage({
                        message: "邮箱不可为空！", type: 'error'})
                    return
                }

                if (this.r_email.indexOf('@') === -1 || this.r_email.split('@')[1] !== 'qq.com'){
                    ElMessage({
                        message: "邮箱格式错误！", type: 'error'})
                    return
                }

                this.save_cd = true
                this.save_text = '冷却中'

                setTimeout(function () {
                    _this.save_cd = false
                    _this.save_text = '重置密码'
                }, 5000)

                // 初始化加载动画
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                // 5秒后终止加载动画
                setTimeout(() => {
                    loading.close()
                }, 5000)

                let this_ = this;
                axios.post('/user/api/forgot', Qs.stringify({
                    "email": this_.r_email
                }))
                    .then(function (response) {

                        // 获取response时，5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        if (response.data === '0'){
                            ElMessage({message: "您的新密码已发送至您的邮箱", type: 'success'})
                            this_.$router.replace("/user/login");
                        }
                        else if (response.data === '-1'){
                            ElMessage({message: "非法请求", type: 'error'})
                        }
                        else if (response.data === '1'){
                            ElMessage({message: "邮箱不存在", type: 'warning'})
                        }
                        else if (response.data === '2'){
                            ElMessage({message: "该邮箱今日已重置过密码", type: 'warning'})
                        }
                        else {
                            ElMessage({message: "服务器异常", type: 'error'})
                            console.log(response.data);
                        }
                    })
                    .catch(function (error) {

                        // 出现异常时，0.5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        console.log(error);
                        ElMessage({message: "服务器异常", type: 'error'})
                    });
            }
        }
    }
</script>

<style scoped>
    .forgot_main{
        padding: 128px 16px 0 16px;
    }

    .forgot-button{
        margin-top: 36px;
        width: 100%;
    }

    .forgot_input{
        padding: 16px 0;
    }
</style>